<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
    <style>
        .router-link-active,.myactive{
            color: red;
            font-size:30px;
        }
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(150px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.5s ease;
        }
    </style>
</head>
<body>
<div id="app">
    <!--不推荐使用-->
    <!--<a href="#/login">登录</a>-->
    <!--<a href="#/register">注册</a>-->

    <!--router里面自定义了router-link  用于跳转-->
    <!--router-link  默认渲染一个a标签
    tag  是可以将设置的标签  替代  默认的  a  标签
    -->

    <router-link to="login" tag="span">登录</router-link>
    <router-link to="register">注册</router-link>

    <!--显示-->
    <!-- 这是 vue-router 提供的元素，专门用来 当作占位符的，将来，路由规则，匹配到的组件，就会展示到这个 router-view 中去 -->

    <transition mode="out-in">
        <router-view></router-view>
    </transition>

</div>
<script>
    // 组件的模板对象
    var login = {
        template:'<h1>登录组件</h1>'
    }
    var register = {
        template:'<h1>注册组件</h1>'
    }


    /*
     在router里面不能用这种组件里面的login  因为 login   是名字  必须是网页里面有<>的标签名
     Vue.component('login', {
     template: '<h1>登录组件</h1>'
     })
     */


    // 2. 创建一个路由对象， 当 导入 vue-router 包之后，在 window 全局对象中，就有了一个 路由的构造函数，叫做 VueRouter
    // 在 new 路由对象的时候，可以为 构造函数VueRouter，传递一个配置对象
    /*
     active-class   设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置    默认值: "router-link-active"
     */
    var routerObj  = new VueRouter({
        // route // 这个配置对象中的 route 表示 【路由匹配规则】 的意思
        routes:[// 路由匹配规则
            // 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：
            //  属性1 是 path， 表示监听 哪个路由链接地址；
            //  属性2 是 component， 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件
            // 注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称；
            // { path: '/', component: login },
                //默认一进去就是某个页面
            {path:'/',redirect:'/login'},
            {path:'/login',component:login},
            {path:'/register',component:register}
        ],
        linkActiveClass:'myactive'

    })


    var vm = new Vue({
        el:'#app',
        data:{

        },
        methods:{

        },
        router:routerObj     // 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
    })
</script>
</body>
</html>